<template>
	<view>
		<view @touchmove.stop.prevent :class="isshowpopup ? 'shade' : ''" @click="coles"></view>
		<view class="header">
			<view class="back" @click="back"><image src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/1bc7a202210081603105008.png" mode=""></image></view>
			<view class="shippingaddress">收货地址</view>
			<view class="addressmag" @click="shippingAddress">
				<view class="">
					<text class="msg">{{ addressFrom.real_name }}</text>
					<text class="msg">{{ addressFrom.phone }}</text>
					<view class="address">
						地址：{{
							addressFrom.province == undefined ? '请选择地址' : addressFrom.province + '' + addressFrom.city + '' + addressFrom.district + '' + addressFrom.detail
						}}
					</view>
				</view>
				<view class=""><image @click="shippingAddress" src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/b11e4202210081556078759.png" mode=""></image></view>
			</view>
		</view>
		<view class="allcontent">
			<view class="content" v-for="(i, inx) in orderList" :key="inx">
				<view class="">
					<view class="storetitle" v-if="i.suppliers.length != 0">
						<image src="http://www.szzn.group/uploads/20221107/227f9c901202e18708a0c2e351894951.png" mode=""></image>
						<text>{{ i.suppliers.title }}</text>
					</view>
					<view class="" v-for="(item, index) in i.cartInfo" :key="index">
						<view class="shoppingmsg">
							<view class="shoppingone">
								<view class=""><image :src="item.productInfo.image" mode=""></image></view>
								<view class="">
									<view class="title">{{ item.productInfo.store_name }}</view>
									<view class="subtitle">{{ item.is_spec == 0 ? item.productInfo.store_info : item.spec.sku }}</view>
									<view class="price">
										<view class="">
											<text v-if="item.productInfo.expend_integral == 0">
												￥{{ item.is_spec == 0 ? item.productInfo.price : item.spec.length == 0 ? item.productInfo.price : item.spec.price }}
											</text>
											<text v-if="item.productInfo.expend_integral != 0">{{ item.productInfo.expend_integral + '积分' }}</text>
										</view>
										<view class="shopingnum">x{{ item.cart_num }}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="memberdiscount1">
							<view class="">会员折扣</view>
							<view class="memberprice">￥{{ item.truePrice - (item.is_spec == 0 ? item.productInfo.price : item.spec.price) * item.cart_num }}</view>
						</view>
						<view class="shoppingprice">
							<view class="shoppingprice-one">
								<view class="">商品实付金额</view>
								<view class="actuallypaid" v-if="item.productInfo.expend_integral == 0">￥{{ item.truePrice }}</view>
								<view class="actuallypaid" v-if="item.productInfo.expend_integral != 0">{{ item.productInfo.expend_integral + '积分' }}</view>
							</view>

							<view class="shoppingprice-tow">
								<view class="">运费</view>
								<view class="freight">￥{{ i.priceGroup.storePostage }}</view>
							</view>
						</view>
					</view>
					<!-- <view class="memberdiscount">
						 <view class="leave">留言</view> 
						<van-cell-group>
						  <van-field
						    :value="mark"
						    label="留言"
						    type="textarea"
						    placeholder="请输入留言"
						    autosize
						    :border="false"
						  />
						</van-cell-group>
					<textarea v-model="mark" placeholder="选填:告诉卖家你对商品/订单的要求"></textarea> 
					</view> -->
				</view>
			</view>
			<view class="zbottom" @click="open">
				<view class="">商家优惠</view>
				<view class="memberprice">
					<text v-if="youhuiID == ''" style="font-size: 28rpx;">请选择优惠券</text>
					<text v-else>￥{{ -parseInt(youhuiPrice) }}</text>
				</view>
			</view>
		</view>
		<view class="fooder">
			<view class="fooder-msg">
				<view class="">合计：</view>
				<view class="">
					<text v-if="jf == 0">￥</text>
					<text style="font-size: 36rpx;" v-if="jf == 0">{{ allPrice - parseInt(youhuiPrice) }}</text>
					<text style="font-size: 36rpx;" v-if="jf != 0">{{ jf + '积分' }}</text>
				</view>
				<view class="" @click="submitOrder">提交订单</view>
			</view>
		</view>
		
		<view class="popul" v-if="isshowpopup">
			<view class="detail">优惠详情</view>
			<view class="list">
				<scroll-view scroll-y="true" class="heig" v-if="youhui.length != 0">
					<view :class="youhuiID == item.id ? 'active-style' : ''" class="kkk" v-for="(item, index) in youhui" :key="item.id" @click="onchnm(item.id, item.coupon_price)">
						<view class="left">
							<text class="fuhao">￥</text>
							<text class="price">{{ parseInt(item.coupon_price) }}</text>
						</view>
						<view class="right">
							<view class="title">【体验券】{{ item.coupon_title }}</view>
							<view class="time">{{ item.end_time }}前可用</view>
						</view>
						<view class="gouxuan" v-if="youhuiID == item.id">
							<image src="https://www.szzn.group/uploads/20221122/a87c3aa17d290a4bb212f32ff7a3ab7a.png" mode=""></image>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="zanwuy" v-if="youhui.length == 0"><view class="">暂无优惠券</view></view>
			<view class="fooder" @click="config"><view class="">确定</view></view>
		</view>
	</view>
</template>

<script>
import { shoppingCartNotarize, payOrder, updateShoppingCount, defaultAddress, myCoupons } from '@/api/api.js';
export default {
	data() {
		return {
			isshowpopup: false,
			orderList: [],
			productPrice: 0, //产品小计
			actuallypaid: 0, //实际支付,
			member: 0, // 会员折扣
			allPrice: 0, // 合计
			posttag: '', // 运费
			orderkey: '', //订单密钥
			mark: '', // 备注信息
			addressFrom: '', //默认地址,
			allPosttag: 0,
			expend_integral: '', //积分
			jf: '', //总积分
			radio: '',
			couponList: [],
			youhui: [],
			youhuiID: '',
			youhuiPrice: '',
			orderId:'',
			addObj:'',
		};
	},
	onLoad(options) {
		this.orderId = options.cardId
		if (options.new == 1) {
			this.shoppingCartNotarizeNew(options.cardId);
		} else {
			this.shoppingCartNotarize(options.cardId);
		}
		this.defaultAddress();
		this.myCoupons();
	},
	onShow() {
		this.defaultAddress();
		this.myCoupons();
	},
	computed: {
		allprice() {
			this.orderList.forEach((item, index) => {
				this.allPrice = parseFloat(this.allPrice) + parseFloat(item.priceGroup.totalPrice);
				this.allPosttag = parseFloat(this.allPosttag) + parseFloat(item.priceGroup.storePostage);
			});
			this.allPrice = (this.allPrice + this.allPosttag).toFixed(2);
		}
	},
	methods: {
		
		coles() {
			this.isshowpopup = false;
		},
		open() {
			this.isshowpopup = true;
		},
		onchnm(id, price) {
			if (parseFloat(price) > parseFloat(this.allPrice))
				return uni.showToast({
					title: '不满足使用条件',
					duration: 1000,
					icon: 'error'
				});
			this.youhuiID = id;
			this.youhuiPrice = price;
		},
		config() {
			this.isshowpopup = false;
		},
		myCoupons() {
			let data = `page=${1}&limit=${500}&status=${0}`;
			myCoupons(data).then(res => {
				this.youhui = res.data.data;
			});
		},
		// 获取默认地址
		defaultAddress() {
			if(this.addObj == ''){
				defaultAddress().then(res => {
					if (res.data.code == '200') {
						this.addressFrom = res.data.data;
					}
				});
			}else {
				this.addressFrom = JSON.parse(this.addObj)
			}
			
		},

		// 返回
		back() {
			uni.navigateBack();
		},
		// 去收货地址
		shippingAddress() {
			uni.navigateTo({
				url: '/myIndex/address/address?orderId='+this.orderId
			});
		},
		operation(type, item) {
			if (type == 1) {
				item.cart_num++;
				this.productPrice = item.productInfo.price * item.cart_num;
				let data = `cartId=${item.id}&cartNum=${item.cart_num}`;
				updateShoppingCount(data).then(res => {});
			} else {
				if (item.cart_num == 1) return;
				item.cart_num--;
				this.productPrice = item.productInfo.price * item.cart_num;
				let data = `cartId=${item.id}&cartNum=${item.cart_num}`;
				updateShoppingCount(data).then(res => {});
			}
		},
		// 获取订单数据
		shoppingCartNotarize(id) {
			let data = `cartId=${id}&is_new=${0}`;
			shoppingCartNotarize(data).then(res => {
				if (res.data.code == '200') {
					this.orderList = res.data.data.cartInfo;
					this.couponList = res.data.data.couponList;
					this.orderkey = res.data.data.orderKey;
				} else {
					uni.showToast({
						title: res.data.msg,
						duration: 2000,
						icon:'error'
					});
				}
			});
		},
		// 获取订单数据
		shoppingCartNotarizeNew(id) {
			let data = `cartId=${id}&is_new=${1}`;
			shoppingCartNotarize(data).then(res => {
				if (res.data.code == '200') {
					this.orderList = res.data.data.cartInfo;
					this.couponList = res.data.data.couponList;
					this.jf = this.orderList[0].cartInfo[0].productInfo.expend_integral;
					this.orderkey = res.data.data.orderKey;
				} else {
					uni.showToast({
						title: res.data.msg,
						duration: 2000,
						icon:'error'
					});
				}
			});
		},

		// 提交订单
		submitOrder() {
			this.orderList.forEach(item => {
				this.expend_integral = item.cartInfo[0].productInfo.expend_integral;
			});
			uni.showLoading({
				title: '加载中'
			});
			let that = this;
			let data = {
				special_id: this.addressFrom.id,
				pay_type_num: 40,
				payType: 'weixin',
				from: 'weixin',
				useGold: that.expend_integral == 0 ? false : true,
				key: that.orderkey,
				mark: that.mark,
				link_pay_uid: '',
				price_id: that.youhuiID == '' ? 0 : that.youhuiID,
				group_id: that.expend_integral == 0 ? 3 : 6
			};
			payOrder(data).then(res => {
				if (res.data.code == '200') {
					uni.hideLoading();
					let obj = res.data.data.result.jsConfig;
					if (that.expend_integral != 0) {
						uni.showToast({
							title: res.data.msg,
							duration: 1000
						});
						let times = setTimeout(() => {
							uni.reLaunch({
								url: `/myIndex/myorder/myorder?index=` + 2
							});
						}, 500);
						// a
					} else {
						uni.requestPayment({
							provider: 'wxpay', // 服务提提供商
							appId: obj.appid,
							timeStamp: obj.timestamp, // 时间戳
							nonceStr: obj.nonceStr, // 随机字符串
							package: obj.package,
							signType: obj.signType, // 签名算法
							paySign: obj.paySign, // 签名
							success: function(red) {
								uni.reLaunch({
									url: `/page_shoppingcart/paysucceed/paysucceed?orderId=${res.data.data.result.orderId}&all=${that.allPrice}`
								});
							},
							fail: function(err) {
								uni.reLaunch({
									url: '/page_shoppingcart/orderdetail/orderdetail?orderId=' + res.data.data.result.orderId
								});
							}
						});
					}
				} else {
					uni.hideLoading();
					uni.showToast({
						title: res.data.msg,
						duration: 2000,
						icon:'error'
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.header {
	background-color: #282828;
	height: 400rpx;
	position: relative;
	padding: 10rpx 30rpx;
	font-size: 26rpx;

	image {
		width: 45rpx;
		height: 45rpx;
	}
}

.back {
	position: fixed;
	top: 100rpx;
	left: 40rpx;
	// padding: 0 0 0 40rpx;
	color: #fff;
	font-size: 32rpx;
	// background-color: #282828;
}

.shippingaddress {
	margin-top: 200rpx;
	color: #fff;
	font-size: 26rpx;
}

.addressmag {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;

	image {
		width: 40rpx;
		height: 40rpx;
	}
}

.msg {
	display: inline-block;
	padding: 10rpx 0;
}

.address {
	width: 600rpx;
	padding: 10rpx 0;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.allcontent {
	background-color: #fafafa;
}

.content {
	padding: 25rpx 25rpx 10rpx;
	// height: 100%;
	margin-bottom: 20rpx;
	// background-color: #fff;
}

.content:last-child {
	padding: 25rpx 25rpx 150rpx !important;
}

.shoppingmsg {
	background-color: #fff;
	// border-radius: 20rpx;
	padding: 10rpx 30rpx;

	image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 15rpx;
		margin-right: 30rpx;
	}

	.title {
		font-weight: 700;
		font-size: 30rpx;
		width: 470rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.subtitle {
		font-size: 26rpx;
		color: #ccc;
		margin: 5rpx 0 20rpx 0;
	}

	.price {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 40rpx;

		text {
			font-size: 26rpx;
		}
	}

	.shopingnum {
		font-size: 26rpx;
		color: #ccc;
	}
}

.shoppingone {
	display: flex;
	border-bottom: 1px solid #eee;
	padding: 20rpx 0 40rpx;
}

.shoppingtow {
	padding: 40rpx 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.calculatecount {
	display: flex;
	align-items: center;
}

.symbol {
	font-size: 50rpx;
}

.number {
	background-color: #fafafa;
	padding: 5rpx 35rpx;
	margin: 0 20rpx;
}

.last {
	padding: 50rpx 0 15rpx;
	text-align: right;

	text {
		font-weight: 700;
		font-size: 34rpx;
	}

	.allcount {
		font-size: 30rpx;
		color: #ccc;
		font-weight: 400;
		display: inline-block;
		margin-right: 15rpx;
	}
}

.memberdiscount {
	// margin-top: 20rpx;
	background-color: #fff;
	font-size: 32rpx;
	// padding: 30rpx 20rpx;
	// border-radius: 0 0 20rpx 20rpx;
	// display: flex;
	// justify-content: space-between;
}

.memberdiscount1 {
	// margin-top: 20rpx;
	background-color: #fff;
	padding: 30rpx 20rpx;
	border-radius: 0 0 20rpx 20rpx;
	display: flex;
	justify-content: space-between;
}

.memberprice {
	color: #d5827b;
}

.shoppingprice {
	// margin-top: 20rpx;
	background-color: #fff;
	// border-radius: 20rpx;

	.shoppingprice-one {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #eee;
		padding: 30rpx 20rpx;
	}

	.shoppingprice-tow {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 20rpx;
	}
}

.actuallypaid {
	font-size: 36rpx;
	font-weight: 700;
}

.freight {
	color: #ccc;
	font-size: 28rpx;
}

.leave {
	width: 100rpx;
}

textarea {
	height: 60rpx;
	font-size: 28rpx;
}

.fooder {
	position: fixed;
	bottom: 0;
	z-index: 10;
}

.fooder-msg {
	z-index: 10;
	height: 140rpx;
	background-color: #fff;
	display: flex;
	width: 750rpx;
	justify-content: flex-end;
	align-items: center;

	> view:nth-child(1) {
	}

	> view:nth-child(2) {
		font-size: 44rpx;
		color: #337959;
		margin: 0 20rpx;
		font-weight: 700;

		text {
			font-size: 26rpx;
		}
	}

	> view:nth-child(3) {
		background-color: #289958;
		color: #fff;
		padding: 20rpx 50rpx;
		font-size: 28rpx;
		border-radius: 50px;
		margin-right: 30rpx;
	}
}

.storetitle {
	background-color: #fff;
	padding: 25rpx;
	border-radius: 20rpx 20rpx 0 0;

	image {
		width: 50rpx;
		height: 50rpx;
		vertical-align: middle;
		margin: -5rpx 5rpx 0 0;
	}
}

::v-deep .van-field__label {
	font-size: 32rpx;
	margin-left: -10rpx;
	color: #2d2d2d;
	width: 100rpx;
}

.zbottom {
	margin: 0 25rpx;
	border-radius: 20rpx 20rpx 0 0;
	padding: 15rpx 20rpx 160rpx;
	display: flex;
	justify-content: space-between;
	background-color: #fff;
}

.popul {
	position: fixed;
	width: 100vw;
	bottom: 0;
	left: 0;
	height: 1000rpx;
	background-color: #fff;
	border-radius: 20rpx 20rpx 0 0;
	z-index: 11;
	padding: 20rpx 0;

	.detail {
		display: flex;
		justify-content: center;
	}

	.list {
		padding: 10rpx 20rpx;
		margin: 0 20rpx;
	}
	.fooder {
		position: absolute;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		justify-content: center;
		view {
			width: 500rpx;
			text-align: center;
			padding: 15rpx;
			background-color: #00b26a;
			color: #fff;
			border-radius: 50px;
			font-size: 28rpx;
		}
	}
}

// 遮罩层
.shade {
	position: fixed;
	width: 100vw;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 10;
}

.van-radio {
	margin: 15rpx 0;
}

.heig {
	height: 800rpx;
}
.hhh {
	// display: flex;
	margin: 10rpx 0;
	border: 1px solid #00b26a;
	border-radius: 5rpx;
	width: 180rpx;
	text-align: center;
}
.kkk {
	display: flex;
	align-items: center;
	background-color: #fff;
	position: relative;
	height: 110rpx;
	padding: 10rpx 5rpx;
	margin-bottom: 20rpx;
	border-bottom: 1px solid #eee;
	box-sizing: border-box;
	.gouxuan {
		background-color: red;
		border-radius: 0 9rpx 0 10rpx;
		position: absolute;
		right: 0;
		top: 0;
		width: 30rpx;
		height: 35rpx;
		line-height: 35rpx;
		image {
			width: 30rpx;
			height: 30rpx;
		}
	}
	.left {
		width: 150rpx;
		text-align: center;
		color: #f55;
		.fuhao {
			font-size: 24rpx;
		}
		.price {
			font-size: 46rpx;
			font-weight: 700;
		}
	}
	.right {
		.title {
			font-size: 28rpx;
			font-weight: 700;
		}
		.time {
			font-size: 24rpx;
			color: #777;
			margin: 10rpx 0 0 10rpx;
		}
	}
}
.active-style {
	border: 1px solid red;
	border-radius: 10rpx;
}
.zanwuy {
	display: flex;
	justify-content: center;
	color: #ccc;
	font-size: 28rpx;
	margin-top: 20rpx;
}
</style>
